레이아웃 만들기
✒️ 2025-05-16 12:39 내용 수정
web grid layout
- 참고 자료 : https://designbase.co.kr/webdesign-4/
- container : 컨텐츠 영역의 가장 큰 폭의 기준으로, 보통 12개로 구역이 나뉘어 컨텐츠를 크기 별로 배치할 수 있다.
- 768px, 960px, 1024px, 1080px, 1280px, 1440px, 1920px 등으로 사용할 수 있다.
- 반응형 웹에 최적화된 단은 12단으로, 거터(간격)값은 30, 24, 20 중 하나가 적절하다.
- 그리드 계산기 : http://gridcalculator.dk/
- 그리드 계산기에선 페이지 양 끝은 margin, column 간 간격은 gutter로 부른다.
- css에서의 margin은 컨텐츠 간 간격이므로 헷갈리지 않게 주의해야 한다.
자주 사용하는 규격
- 1200px 그리드 기준
- margin 30px / 3% 사용
- inner 1170 px
- 거터가 있는 가변 크기 계산 : (100% - 3% * 거터수) / 박스개수
| | 간격 30px 고정크기 | 간격 없는 가변크기 | 간격 3%인 가변크기 |
| ---- |: ----: |: ----: |: ----: |
| inner | 1170px | 100% | 100% |
| 2개 | 570px | 50% | 48.5% |
| 3개 | 370px | 33.3333% | 31.333% |
| 4개 | 270px | 25% | 22.75% |
기본 레이아웃 만들기
- 가장 기본적인 레이아웃 : header, main > section, footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="layout-2.css"> <!-- 파일 경로 작성 -->
</head>
<body>
<header class="header">
<div class="inner">
<h1 class="logo"><a href="#">LOGO</a></h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portpolio</a>
<a href="#">Contact</a>
</nav>
</div>
</header>
<main>
<section class="visual"></section>
<section class="board content">
<div class="inner">
<h2 class="title">게시판</h2>
</div>
</section>
<section class="bestItem content">
<div class="inner">
<h2 class="title">Best 아이템</h2>
</div>
</section>
<section class="newItem content">
<div class="inner">
<h2 class="title">New 아이템</h2>
</div>
</section>
</main>
<footer class="footer"></footer>
</body>
</html>
*{margin:0;padding:0; box-sizing: border-box;}
ul, ol, li{list-style: none;}
a{text-decoration: none;}
.header{width: 100%; height: 100px; background-color: #ddd;}
.inner{width:1170px; margin:0 auto;}
.content{width:100%; padding: 150px 0;}
.content .inner{height: 100px; background-color: lightblue;}
.footer{width: 100%; height: 100px; background-color: #666;}
레이아웃 만들기 순서
- 사이트에 작성할 내용을 기준으로 구역을 나눈다.
- HTML 기준으로 참고.
- 실습을 위해 검찰청 사이트를 참고하여 레이아웃을 구성했다.
- https://www.spo.go.kr/site/spo/main.do
- 나눈 내용으로 태그를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/layout-4.css">
</head>
<body>
<header class="header">
<div class="inner">
<h1 class="logo"><a href="#">검찰청</a></h1>
<div class="menuWrap">
<div class="util">
<span class="ls">nation</span>
<span class="ls">역사체험관</span>
<span class="ls">글자크기조정</span>
<span class="ls">언어설정</span>
</div>
<nav class="gnbWrap">
<ul id="gnb">
<li><a href="#">참여민원</a></li>
<li><a href="#">검찰활동</a></li>
<li><a href="#">정보자료</a></li>
<li><a href="#">알림소식</a></li>
<li><a href="#">정보공개</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="visual"></section>
<section class="con1 content">
<div class="inner">
<h2 class="title">
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</h2>
</div>
</section>
<section class="con2 content">
<div class="inner">
<h2 class="title">
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</h2>
</div>
</section>
<section class="con3 content">
<div class="inner">
<h2 class="title">
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</h2>
</div>
</section>
<section class="con4 content">
<div class="inner">
<h2 class="title">
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</h2>
</div>
</section>
<footer class="footer">
<div class="inner">
<h1 class="fLogo"><a href="#">Logo</a></h1>
<div class="fMenu box">menu</div>
<div class="fSns box">sns</div>
</div>
</footer>
</body>
</html>
- 각 구역에 적용할 CSS를 작성한다.
*{margin:0; padding: 0; box-sizing: border-box;}
ul, ol, li{list-style: none;}
a{text-decoration: none;}
/* 헤더, 섹션, 푸터 */
.content{width: 100%; padding: 120px 0;}
.inner{width: 1170px; margin: 0 auto;}
.content .title{ margin: 0 0 40px;font: bold 24px 'inherit'; text-align: center; color:#444;}
.content .wrap{display:flex; flex-direction: row; justify-content: space-between;}
.content .box{width: 25%; height: 300px; border: 1px solid black; background-color: #ddd;}
.header{width: 100%; height: 100px; background-color: #ddd;}
.header .inner{display: flex;}
.header .logo{width: 100px; background-color: pink;}
.header .menuWrap{width: calc(100% - 100px); background-color: yellow;}
.header .menuWrap .util{display: flex; justify-content: flex-end;}
.header .menuWrap .util .ls{font-size: 14px; color: #777;}
#gnb{display: flex; justify-content: flex-end;}
#gnb > li{border: 2px solid blue;}
#gnb > li > a{font: bold 18px 'inherit'; color: #444;}
.visual{width: 100%; height: 500px; background-color: salmon;}
.footer{width: 100%; padding: 10px 0; background-color: #ddd;}
.footer .inner{display: flex;}
.footer div{ border: 1px solid blue;}
.footer .fLogo{width: 15%;}
.footer .fMenu{width: 60%;}
.footer .fSns{size: 25%;}
